import React, { useMemo } from "react";
import { useState, createContext, useRef } from "react";
import { Button, Modal } from "react-bootstrap";

/**
 * 类 Windows 消息框组件。
 * @param {object} props 
 * @param {string} props.title 消息框标题
 * @param {string} props.message 消息框内容
 * @param {string} [props.type="ok"] 消息框类型
 * @param {boolean} [props.showModal=false] 是否显示消息框
 * @param {function} [props.onResult] 消息框结果回调
 * @returns {JSX.Element}
 */
function MessageBox(props) {
    let title = props.title;
    let message = props.message;
    let type = props.type || 'ok';
    let showModal = props.showModal || false;
    let onResult = props.onResult || (() => {});

    let buttons = null;

    // 处理不同按钮
    const handleResult = (result) => {
        onResult(result);
    };
    if (type === 'ok') {
        buttons = (
            <Button variant="primary" onClick={ () => handleResult('ok') }>确定</Button>
        );
    }
    else if (type === 'confirmcancel') {
        buttons = (
            <>
                <Button variant="primary" onClick={ () => handleResult('confirm') }>确定</Button>
                <Button variant="secondary" onClick={ () => handleResult('cancel') }>取消</Button>
            </>
        )
    }
    else if (type === 'yesno') {
        buttons = (
            <>
                <Button variant="primary" onClick={ () => handleResult('yes') }>是</Button>
                <Button variant="secondary" onClick={ () => handleResult('no') }>否</Button>
            </>
        )
    }

    return (
        <div>
            <Modal show={showModal}>
                <Modal.Header>
                    <Modal.Title>{title}</Modal.Title>
                </Modal.Header>
                <Modal.Body>{message}</Modal.Body>
                <Modal.Footer>
                    {buttons}
                </Modal.Footer>
            </Modal>
        </div>
    );
}

export default MessageBox;